<template>
    <a-layout class="layout-main">
        <a-layout-sider class="layout-sider" v-model:collapsed="data.collapsed" width="240" collapsedWidth="60" collapsible :trigger="null">
            <Menu :collapsed="data.collapsed" :selected="data.activeRoute"></Menu>
            <div class="collapsed-btn" @click="toggleCollapsed">
              <MenuFoldOutlined v-if="!data.collapsed" />
              <MenuUnfoldOutlined v-else />
            </div>
        </a-layout-sider>
        <div class="layout-right">
          <a-layout-header class="layout-header">
            <Header :route-name="data.activeRoute" :collapsed="data.collapsed" />
          </a-layout-header>
          <a-layout class="layout-body">
              <a-layout-content class="layout-content">
                <div class="content-box">
                  <router-view></router-view>
                </div>
                <a-layout-footer></a-layout-footer>
              </a-layout-content>
          </a-layout>
        </div>
    </a-layout>
</template>

<script>
// import httpRequest from "@/util/httpRequest";
import { Layout } from "ant-design-vue";
import Header from "@/components/header";
import Menu from "@/components/menu";
import {MenuFoldOutlined,MenuUnfoldOutlined} from "@ant-design/icons-vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { reactive } from '@vue/reactivity';
export default {
  components: {
    Header,
    Menu,
    ALayout: Layout,
    ALayoutHeader: Layout.Header,
    ALayoutSider: Layout.Sider,
    ALayoutContent: Layout.Content,
    ALayoutFooter: Layout.Footer,
    MenuFoldOutlined,
    MenuUnfoldOutlined
  },
  setup(){
    const route = useRoute();
    const data = reactive({
      activeRoute: route.path.indexOf("/")!== 0 ? route.path.substring(0,route.path.lastIndexOf("/")) : route.path,
      collapsed:false,
    })
    onBeforeRouteUpdate(to => {
      const path = to.path.indexOf("/")!== 0 ? to.path.substring(0,to.path.lastIndexOf("/")) : to.path;
      data.activeRoute = path;
    });
    const toggleCollapsed = ()=>{
      data.collapsed = !data.collapsed;
    }
    return {
      data,
      onBeforeRouteUpdate,
      toggleCollapsed
    }
  },
  created() {

  },
  mounted() {
  },
};
</script>

<style lang="less" scoped>
.layout-main {
    overflow: auto;
    height: 100%;
}
.layout-header {
    background: #fff;
    height: 72px;
    width: 100%;
    padding:0;
    position: absolute;
    left: 0;
    top: 0;
    min-width: 1360px;
}
.layout-sider {
    background: #fff;
    padding-top: 72px;
    position: relative;
}
.collapsed-btn{
  position: absolute;
  left:0;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #e1e1e1;
  font-size: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#262626;
  background: #fff;
  &:hover{
    background: #f5fdff;
	color:#378EF0;
  }
}
.layout-right{
  height: 100%;
  padding-top:72px;
  flex-grow: 1;
  flex-shrink: 1;
  width: calc(100% - 240px);
}
.layout-body {
    position: relative;
    height: 100%;
}
.layout-content{
  padding:10px;
  height: 100%;
  overflow: auto;
  padding-bottom: 0;
  .content-box{
    min-height: calc(100% - 50px);
  }
  footer{
    padding:14px 50px;
  }
}
</style>
